<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    .tree {
      color: #ddd;
      width: 100%;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
      padding: 4px 0 4px 4px;
      box-sizing: border-box;
    }
    .tree+.tree:not(:last-child) {
      margin: 5px 0;
    }
    .tree-root {
      position: absolute;
      right: 0;
      background: #aaa;
      width: 100px;
    }

    .tree-01 {
      margin: 5px 0;
      background: #999;
      border: 1px solid #909090;
      border-right: 0 !important;
    }

    .tree-02 {
      background: #888;
      border: 1px solid #808080;
      border-right: 0 !important;
    }
    .tree-03 {
      background: #777;
      border: 1px solid #606060;
      border-right: 0 !important;
    }
  </style>
</head>
<body>
<div class="tree tree-root">
  <div class="tree-label">000</div>
  <div class="tree tree-01"><div class="tree-label">111</div></div>
  <div class="tree tree-01"><div class="tree-label">111</div></div>
  <div class="tree tree-01">
    <div class="tree-label">111</div>
    <div class="tree tree-02"><div class="tree-label">222</div></div>
    <div class="tree tree-02"><div class="tree-label">222</div></div>
    <div class="tree tree-02">
      <div class="tree-label">222</div>
      <div class="tree tree-03"><div class="tree-label">333</div></div>
    </div>
</div>
</div>
<script>



</script>
</body>
</html>